<template>
  <div class="common-layout">
    <a-layout>
      <a-layout-header :class="['common-layout-header', {'is-collapse': isCollapse}]">
        <base-header></base-header>
      </a-layout-header>
      <a-layout>
        <a-layout-sider class="common-layout-sider" v-model:collapsed="isCollapse" collapsible :trigger="null" width="240">
          <div class="first-menu-name" v-if="!isCollapse">
            <div>{{$t(activeFirstMenuName)}}</div>
          </div>
          <side-menu></side-menu>
          <div>
            <div  v-if="!isCollapse" class="contact_us">
              <p style=""><span >{{ $t('other.contactUs') }}</span></p>
              <p style="margin-left: -10px;margin-top: -10px;"><PhoneOutlined /><span class="ml-10">4001005296</span></p>
            </div>
            <div  v-if="isCollapse" class="contact_us">
              <div>
                <a-tooltip placement="right" >
                  <template #title>
                    <span ><PhoneOutlined /><span >4001005296</span></span>
                  </template>
                  <div>
                    <span >{{ $t('other.contact') }}<br>{{ $t('other.us') }}</span>
                  </div>
                </a-tooltip>
              </div>
            </div>
          </div>
        </a-layout-sider>
        <a-layout-content class="common-layout-content">
          <tags-view></tags-view>
          <div>
            <base-view></base-view>
          </div>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>

<script>
// import { store } from '@/store'
import { mapState } from 'vuex'
import BaseHeader from './components/baseHeader.vue';
import SideMenu from './components/sideMenu.vue'
import BaseView from './components/baseView.vue'
import TagsView from './components/tagsView.vue'
import { PhoneOutlined} from '@ant-design/icons-vue'
export default {
  name: 'VueLayouts',
  components: {
    BaseHeader,
    SideMenu,
    BaseView,
    PhoneOutlined,
    TagsView
  },
  methods: {

  },
  data () {
    return {
    }
  },
  computed: {
    ...mapState({
      isCollapse: state => state.setting.isCollapse,
      activeFirstMenuName: state => state.setting.activeFirstMenuName,
      // tabs: state => state.setting.tabs,
      // activeFirstMenu: state => state.setting.activeFirstMenu,
    })
  }
}
</script>